// 现在用的router的版本是6版本
// 6版本的路由全部要使用函数组件

import React from "react";

// react-router-dom就是路由插件
// 如果一个项目要使用路由，那么所有和路由相关的内容都要放在BrowserRouter组件的里面
// Link相当于用于做跳转的a标签
// Routes是存放内容切换的容器
import { BrowserRouter, Link, Routes, Route } from "react-router-dom";

const Home = () => {
  return <div>这是首页</div>;
};
const About = () => {
  return <div>这是关于页</div>;
};

const App = () => {
  return (
    <BrowserRouter>
      <h2>路由基础</h2>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
      </ul>
      <ul>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;
